<template>
  <div class="scene-logs">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="连通测试日志" name="0" />
      <el-tab-pane label="执行日志" name="1" />
      <el-tab-pane label="操作日志" name="2" />
      <el-tab-pane label="告警日志" name="3" />
    </el-tabs>

    <div class="scene-logs-body">
      <div class="search-form">
        <el-select v-if="activeName === '2'" v-model="operateType" clearable placeholder="请选择操作类型">
          <el-option
            v-for="(item, index) in dictOptions.operateType"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

        <el-date-picker
          v-model="searchTime"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="yyyy-MM-dd HH:mm:ss"
        />

        <el-button type="primary" :loading="loading" :disabled="loading" @click="searchBtn"> 搜索 </el-button>
      </div>

      <FlexTable
        v-loading="loading"
        border
        :data="tableData"
        :columns="columnsOptions"
      />

      <el-pagination
        :page-size="pagination.pageSize"
        :current-page.sync="pagination.pageNo"
        layout="prev, pager, next, jumper"
        :total="pagination.totalPage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 执行详情弹框 -->
    <el-dialog
      custom-class="scene-logs-inner-dialog"
      width="800px"
      title="执行详情"
      :visible.sync="innerVisible"
      append-to-body
    >
      <div class="search-form">
        <el-select v-model="innerTaskSts" clearable placeholder="请选择执行状态">
          <el-option
            v-for="(item, index) in dictOptions.detailTaskSts"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

        <el-date-picker
          v-model="innerSearchTime"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="yyyy-MM-dd HH:mm:ss"
        />

        <el-button type="primary" :loading="innerLoading" :disabled="innerLoading" @click="innerSearchBtn"> 搜索 </el-button>
      </div>
      <FlexTable
        v-loading="innerLoading"
        border
        :data="innerTableData"
        :columns="innerColumnsOptions"
      />

      <el-pagination
        :page-size="innerPagination.pageSize"
        :current-page.sync="innerPagination.pageNo"
        layout="prev, pager, next, jumper"
        :total="innerPagination.totalPage"
        @size-change="innerHandleSizeChange"
        @current-change="innerHandleCurrentChange"
      />

      <span slot="footer" class="dialog-footer">
        <el-button @click="innerVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

    <el-dialog
      width="800px"
      custom-class="scene-logs-inner-dialog"
      title="告警日志详情"
      :visible.sync="warnVisible"
      append-to-body
    >
      <p> {{ warnTitle }} </p>
      <div class="java-logs" v-html="warnDetail" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="warnVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  connectPageApi,
  executionPageApi,
  operatePageApi,
  alarPageApi,
  executionDetailPageApi
} from '@/api/serviceManage/serviceAdaptation'
import dictMixin from '@/utils/mixins/dict'
export default {
  mixins: [
    dictMixin(['operateType@Local', 'taskSts@Local', 'detailTaskSts@Local', 'componentCode@Local'])
  ],

  props: {
    sceneId: {
      type: String,
      default: ''
    }
  },

  data () {
    return {
      loading: false,
      searchTime: [],
      operateType: '',
      activeName: '0',
      columnsOptions: [
        { label: '时间', prop: 'createTime' },
        { label: '日志', prop: 'info' }
      ],
      tableData: [],
      // 分页相关
      pagination: {
        pageNo: 1,
        pageSize: 10,
        totalPage: 0
      },

      // 执行详情相关
      innerVisible: false,
      innerTaskSts: '',
      innerSearchTime: [],
      innerTableData: [],
      innerLoading: false,
      innerColumnsOptions: [
        { label: '执行时间', prop: 'createTime' },
        { label: '执行明细', prop: 'detail' },
        { label: '执行状态',
          customRender: scope => {
            return this.getDictText('detailTaskSts', scope.row.sts)
          }
        },
        { label: '执行组件',
          customRender: scope => {
            return this.getDictText('componentCode', scope.row.componentCode)
          }
        }
      ],
      // 执行详情分页相关
      innerPagination: {
        pageNo: 1,
        pageSize: 10,
        totalPage: 0
      },
      warnVisible: false,
      warnDetail: null,
      warnTitle: null,
      logSceneId: ''
    }
  },

  created () {
    this.getTable()
  },

  methods: {
    // 搜索按钮
    searchBtn () {
      this.pagination.pageNo = 1
      this.getTable()
    },

    // 获取各表格数据
    getTable () {
      const api = [connectPageApi, executionPageApi, operatePageApi, alarPageApi]
      this.loading = true
      api[this.activeName]({
        sceneId: this.sceneId,
        operateType: this.activeName === '2' ? this.operateType : undefined,
        pageNo: this.pagination.pageNo,
        pageSize: this.pagination.pageSize,
        searchBeginTime: this.searchTime && this.searchTime.length ? this.searchTime[0] : '',
        searchEndTime: this.searchTime && this.searchTime.length ? this.searchTime[1] : ''
      })
        .then(({ code, data }) => {
          this.tableData = data.rows
          this.pagination.totalPage = data.totalRows
        })
        .finally(() => {
          this.loading = false
        })
    },

    // 切换tabs
    handleClick () {
      const columns = [
        [
          { label: '时间', prop: 'createTime' },
          { label: '日志', prop: 'info' }
        ],
        [
          { label: '场景名称', prop: 'sceneName' },
          { label: '通讯标识', prop: 'taskCode', width: '200px', showOverflowTooltip: false },
          { label: '运行状态',
            customRender: scope => {
              return this.getDictText('taskSts', scope.row.taskSts)
            }
          },
          { label: '执行时间', prop: 'createTime' },
          { label: '执行时长(秒)', prop: 'executeTime' },
          { label: '操作',
            customRender: (scope) => {
              return <el-button onClick={() => this.executingDetailBtn(scope.row)}> 执行详情 </el-button>
            }
          }
        ],
        [
          { label: '操作类型',
            customRender: scope => {
              return this.getDictText('operateType', scope.row.operateType)
            }
          },
          { label: '操作人', prop: 'operateUserName' },
          { label: '操作时间', prop: 'createTime' },
          { label: '操作内容', prop: 'operateInfo' }
        ],
        [
          { label: '场景名称', prop: 'sceneName' },
          { label: '异常组件',
            customRender: scope => {
              return this.getDictText('componentCode', scope.row.componentCode)
            }
          },
          { label: '报警原因', prop: 'alarmReason' },
          { label: '报警时间', prop: 'createTime' },
          { label: '操作',
            customRender: (scope) => {
              return <el-button onClick={() => this.warnDetailBtn(scope.row)}> 查看 </el-button>
            }
          }
        ]
      ]

      this.columnsOptions = columns[this.activeName]

      this.pagination.pageNo = 1
      this.searchTime = []
      this.getTable()
    },

    // 执行详情搜索
    innerSearchBtn () {
      this.innerPagination.pageNo = 1
      this.executingDetailBtn()
    },

    // 执行详情按钮
    executingDetailBtn (row) {
      if (row) this.logSceneId = row.id
      this.innerVisible = true
      this.getInnerTableData()
    },

    getInnerTableData () {
      this.innerLoading = true
      executionDetailPageApi({
        logSceneId: this.logSceneId,
        sts: this.innerTaskSts,
        pageNo: this.innerPagination.pageNo,
        pageSize: this.innerPagination.pageSize,
        searchBeginTime: this.innerSearchTime && this.innerSearchTime.length ? this.innerSearchTime[0] : '',
        searchEndTime: this.innerSearchTime && this.innerSearchTime.length ? this.innerSearchTime[1] : ''
      })
        .then(({ code, data }) => {
          this.innerTableData = data.rows
          this.innerTableData.totalPage = data.totalRows
        })
        .finally(() => {
          this.innerLoading = false
        })
    },

    // 告警详情按钮
    warnDetailBtn (row) {
      this.warnVisible = true
      this.warnTitle = `${row.createTime} ${row.alarmReason}`
      this.warnDetail = row.errorMsg
    },

    // 分页操作
    handleSizeChange (val) {
      this.pagination.pageSize = val
      this.getTable()
    },
    handleCurrentChange (val) {
      this.pagination.pageNo = val
      this.getTable()
    },

    // 执行详情弹框分页操作
    innerHandleSizeChange (val) {
      this.innerPagination.pageSize = val
      this.getInnerTableData()
    },
    innerHandleCurrentChange (val) {
      this.innerPagination.pageNo = val
      this.getInnerTableData()
    }
  }
}
</script>

<style lang="scss" scoped>
.scene-logs {
  height: 100%;
  .scene-logs-body {
    height: calc(100% - 50px);
    overflow-y: auto;
  }
}
.scene-logs, ::v-deep .scene-logs-inner-dialog {
  .search-form {
    margin-bottom: 20px;
    .el-date-editor {
      margin: 0 10px;
    }
  }

  .el-pagination {
    text-align: right;
    margin-top: 20px;
  }

  .el-dialog__body {
    padding-top: 0;

    .java-logs {
      border: 1px solid #8f9091;
      border-radius: 5px;
      padding: 10px;
      overflow-y: auto;
      max-height: 400px;
      white-space: pre-wrap;
    }
  }
}
</style>
